<template>
	<view class="zhuce">
		<view class="uni-form-item uni-column">
			<uni-section>
				<uni-easyinput type="text" v-model="usernameInput" placeholder="输入用户名"></uni-easyinput>
			</uni-section>
			<uni-section>
				<uni-easyinput type="text" v-model="phoneInput" placeholder="输入手机号码" @input="validatePhone"></uni-easyinput>
				<text v-if="phoneError" class="error-message">{{ phoneError }}</text>
			</uni-section>
			<uni-section>
				<view class="code-input">
					<uni-easyinput type="text" v-model="codeInput" placeholder="输入短信验证码"></uni-easyinput>
					<button class="send-code-btn" :disabled="!isValidPhone || sendingCode" @click="sendCode">
						{{ sendingCode ? `${countdown}秒后重新发送` : '发送验证码' }}
					</button>
				</view>
			</uni-section>
			<uni-section>
				<uni-easyinput type="password" v-model="passwordInput" placeholder="设置登录密码"></uni-easyinput>
			</uni-section>
		</view>
		<view class="tips">
			<radio-group @change="check">
				<label class="lab">
					<radio value="cb" class="check" />
					<text>已阅读同意</text><text class="red">《用户服务协议》</text>
				</label>
			</radio-group>
		</view>
		<button class="btn" @click="addreg" :disabled="isFormValid">确认</button>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
// import axios from 'axios'

const usernameInput = ref<string>('')
const avatarInput = ref<string>('/static/05.jpg')
const phoneInput = ref<string>('')
const codeInput = ref<string>('')
const passwordInput = ref<string>('')
const isAgree = ref<boolean>(false)
const sendingCode = ref<boolean>(false)
const countdown = ref<number>(60)
const phoneError = ref<string>('')
const isValidPhone = ref<boolean>(true)

// 计算属性，用于确定表单是否有效
const isFormValid = computed(() => {
	return !isValidPhone || !codeInput.value || !passwordInput.value || !isAgree.value || !usernameInput.value || !avatarInput.value
})

const check = (e) => {
	isAgree.value = e.detail.value.length > 0
}

const validatePhone = (value: string) => {
	const phoneRegex = /^1[3-9]\d{9}$/;
	if (value && !phoneRegex.test(value)) {
		phoneError.value = '请输入有效的手机号码';
		isValidPhone.value = false;
	} else {
		phoneError.value = '';
		isValidPhone.value = true;
	}
}

watch(phoneInput, validatePhone);

const addreg = () => {
	uni.request({
		url: 'http://localhost:3000/ljy/adduser',
		method: 'POST',
		data: {
			username: usernameInput.value,
			imgurl: avatarInput.value,
			phone: phoneInput.value,
			code: codeInput.value,
			password: passwordInput.value
		},
		success(res: any) {
			if (res.data.code == 200) {
				uni.showToast({
					title: '注册成功',
					duration: 1000,
					icon: 'success'
				});
				usernameInput.value = '';
				avatarInput.value = '';
				phoneInput.value = '';
				codeInput.value = '';
				passwordInput.value = '';
				isAgree.value = false;
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	})
}

const sendCode = async () => {
	if (sendingCode.value) return

	sendingCode.value = true
	uni.request({
		url:'http://localhost:3000/ljy/send-code',
		method:"POST",
		data:{
			phoneNumber: phoneInput.value
		},
		success(response) {
			console.log(response.data.message);
			// 发送成功后的倒计时逻辑
			const timer = setInterval(() => {
				countdown.value--;
				if (countdown.value <= 0) {
					clearInterval(timer);
					sendingCode.value = false;
					countdown.value = 60;
				}
			}, 1000);
		},
		fail(error) {
			console.error('验证码发送失败:', error);
			sendingCode.value = false;
		}
	})
	
}

const verifyCode = async () => {
	if (sendingCode.value) return
		uni.request({
			url:'http://localhost:3000/ljy/verify-code',
			method:"POST",
			data:{
				phoneNumber: phoneInput.value, code: codeInput.value 
			},
			success(response) {
				console.log(response.data.message);
			},
			fail(error) {
				console.error('验证码验证失败:', error);
			}
		})
	
}
</script>

<style scoped lang="scss">
.zhuce {
	padding: 60rpx;
	.uni-form-item {
		margin-bottom: 20rpx;
	}
	.code-input {
		display: flex;
		align-items: center;
		.send-code-btn {
			margin-left: 10rpx;
			padding: 10rpx 20rpx;
			background-color: #007aff;
			color: #fff;
			border: none;
			border-radius: 50rpx;
			font-size: 25rpx;
		}
		.send-code-btn:disabled {
			background-color: #ccc;
		}
	}
	.tips {
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		.lab {
			text {
				font-size: 25rpx;
			}
			.red {
				text-decoration: underline;
				color: red;
			}
		}
	}
	.btn {
		border-radius: 100rpx;
		background-color: blue;
		color: #fff;
	}
	.error-message {
		color: red;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
}
</style>